<style>
    .tab-content > .chart {
        padding: 10px;
    }
    .title {
      font-size: 20px;
      font-weight: bold;
      margin: 0 0 10px 10px;
    }
    .proportion-title {
      font-size: 18px;
      font-weight: 500;
    }
    .search-box {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .time {
      font-size: 18px;
      font-weight: 500;
      margin-left: 15px;
      width: 50px;
    }
    .type-box {
      display: flex;
      align-items: center;
    }
    .select-item {
        font-size: 15px;
        font-weight: 400;
        color: #4D4D4D;
        padding: 3px 10px;
        background-color: #FFF;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
    }
    
    .active-item {
        color: #FFFFFF;
        background-color: #4B5BDE;
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<div class="row">
    <div class="title">数据总表</div>
    <div class="search-box" id="search">
      <div class="time">时间:</div>
      <div>
        <el-date-picker
                size="small"
                v-model="date"
                prefix-icon="el-icon-date"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                @change="changeDate">
        </el-date-picker>
      </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3 id="distrition_num">0</h3>
                <p>渠道总数</p>
            </div>
            <div class="icon">
                <i class="fa fa-th-large"></i>
            </div>
            <!-- <a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
            <div class="inner">
                <h3 id="income">0</h3>
                <p>营收总数</p>
            </div>
            <div class="icon">
                <i class="fa fa-area-chart"></i>
            </div>
            <!-- <a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3 id="card_num">0</h3>
                <p>发卡总数</p>
            </div>
            <div class="icon">
                <i class="fa fa-th-list"></i>
            </div>
            <!-- <a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-red">
            <div class="inner">
                <h3 id="card_activate_num">0</h3>
                <p>激活总数</p>
            </div>
            <div class="icon">
                <i class="fa fa-user"></i>
            </div>
            <!-- <a href="#" class="small-box-footer">更多 <i class="fa fa-arrow-circle-right"></i></a> -->
        </div>
    </div>
</div>
<div class="row" stydle="margin-bottom:5px;">
  <div class="title">占比分析</div>
    <section class="col-lg-5 connectedSortable">
        <div class="proportion-title">渠道占比</div>
        <div class="nav-tabs-custom charts-custom">
            <div class="tab-content no-padding">
                <div class="chart tab-pane active" id="pie-chart1" style="position: relative; height: 300px;"></div>
            </div>
        </div>
        <div class="proportion-title">营收占比</div>
        <div class="nav-tabs-custom charts-custom">
            <div class="tab-content no-padding">
                <div class="chart tab-pane active" id="pie-chart2" style="position: relative; height: 300px;"></div>
            </div>
        </div>
    </section>
    <section class="col-lg-5 connectedSortable">
        <div class="proportion-title">发卡占比</div>
        <div class="nav-tabs-custom charts-custom">
            <div class="tab-content no-padding">
                <div class="chart tab-pane active" id="pie-chart3" style="position: relative; height: 300px;"></div>
            </div>
        </div>
        <div class="proportion-title">激活占比</div>
        <div class="nav-tabs-custom charts-custom">
            <div class="tab-content no-padding">
                <div class="chart tab-pane active" id="pie-chart4" style="position: relative; height: 300px;"></div>
            </div>
        </div>
    </section>
</div>
<!--<div class="row">-->
<!--    <div class="title">数据细表</div>-->
<!--    <div class="search-box" id="search2">-->
<!--      <div class="type-box">-->
<!--        <div class="select-item distributor_type" :class="currentChannel == index ? 'active-item' : ''" @click="selectChannel(index)"-->
<!--         v-for="(item,index) in channelList" :key=index>{{item}}</div>-->
<!--      </div>-->
<!--      <div class="time">时间:</div>-->
<!--      <div>-->
<!--        <el-date-picker-->
<!--                size="small"-->
<!--                v-model="date"-->
<!--                prefix-icon="el-icon-date"-->
<!--                type="datetimerange"-->
<!--                range-separator="至"-->
<!--                start-placeholder="开始日期"-->
<!--                end-placeholder="结束日期"-->
<!--                align="right"-->
<!--                @change="changeDate">-->
<!--        </el-date-picker>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="panel-body">-->
<!--        <div id="myTabContent" class="tab-content">-->
<!--            <div class="tab-pane fade active in" id="one">-->
<!--                <div class="widget-body no-padding">-->
<!--                    <div id="toolbar" class="toolbar" style="display: none">-->
<!--                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}"><i-->
<!--                                class="fa fa-refresh" ></i> </a>-->
<!--                    </div>-->
<!--                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%">-->
<!--                    </table>-->
<!--                </div>-->
<!--            </div>-->

<!--        </div>-->
<!--    </div>-->
<!--</div>-->
